<template>
    <div class="animated fadeInLeft" v-cloak>
        <div class="list bg_fff">
            <div class="flexbox plist line_bottom_49 fs16 list_active">
                <p class="pr10"><i class="iconfont color_red fs24">&#xe60c;</i></p>
                <p>本地音乐 <span class="color_aaa fs14">(0)</span></p>
            </div>
            <div class="flexbox plist line_bottom_49 list_active">
                <p class="pr10"><i class="iconfont color_red fs21">&#xe60f;</i></p>
                <p>最近播放 <span class="color_aaa fs14">(0)</span></p>
            </div>
            <div class="flexbox plist line_bottom_49 list_active">
                <p class="pr10"><i class="iconfont color_red fs21">&#xe601;</i></p>
                <p>下载管理 <span class="color_aaa fs14">(0)</span></p>
            </div>
            <div class="flexbox plist line_bottom_49 list_active">
                <p class="pr10"><i class="iconfont color_red fs21">&#xe93b;</i></p>
                <p>我的电台 <span class="color_aaa fs14">(0)</span></p>
            </div>
            <div class="flexbox plist list_active">
                <p class="pr10"><i class="iconfont color_red fs21">&#xe623;</i></p>
                <p>我的收藏 <span class="color_aaa fs14">(专辑/歌手/专栏)</span></p>
            </div>
        </div>
        <div class="flexbox pl15 pr15 pt7 pb7 color_666">
            <p><i class="iconfont fs13">&#xe80b;</i></p>
            <p class="fs13 flex_1 ml10">创建的歌单 <span>(1)</span></p>
            <p><i class="iconfont fs13">&#xe69d;</i></p>
        </div>
        <div class="bg_fff pb30 mb10">
            <div class="flexbox list_active line_bottom_56">
                <div class="mt3 mb3 ml5">
                    <img src="../../static/img/mylove.jpg" height="56" width="56">
                </div>
                <div class="flex_1 pl10">
                    <p>我喜欢的音乐</p>
                    <p class="fs12 color_999 pt3">0首</p>
                </div>
                <p><i class="iconfont color_aaa pr15">&#xe93c;</i></p>
            </div>
        </div>
        <div class="tc bg_fff pt20 pb10">
            <p>为您推荐</p>
        </div>
        <ul class="flexbox flex_start pb30 bg_fff">
            <li class="flex_1 fs13">
                <p><img src="../../static/img/list-1.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">有没有一首歌，让你瞬间热泪盈眶</p>
            </li>
            <li class="flex_1 ml3 mr3 fs13">
                <p><img src="../../static/img/list-2.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">嘿，这歌里有甜蜜的味道</p>
            </li>
            <li class="flex_1 fs13">
                <p><img src="../../static/img/list-3.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">极致天籁，一听倾心</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data(){
            return {
                
            }
        }
    }
</script>

<style scoped>
    .line_bottom_49 {
      position: relative;
    }

    .line_bottom_49:before {
      content: " ";
      position: absolute;
      left: 49px !important;
      right: 0;
      bottom: -1px;
      height: 1px;
      border-bottom: 1px solid #EFEFEF; 
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      left: 0;
    }

    .line_bottom_56 {
      position: relative;
    }

    .line_bottom_56:before {
      content: " ";
      position: absolute;
      left: 70px !important;
      right: 0;
      bottom: -1px;
      height: 1px;
      border-bottom: 1px solid #EFEFEF; 
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      left: 0;
    }
</style>